<!--<template> -->
<!-- <div class="background-image">-->

<!--  <div class="login-container" >  -->
<!--    <h2 >登录</h2>  -->
<!--    <form @submit.prevent="handleLogin" style="margin-top: 20px;">  -->
<!--      <div class="form-group">  -->
<!--        <label for="username">账号:</label>  -->
<!--        <input type="text" id="username" v-model="loginForm.username" required style="margin-top: 2px;">  -->
<!--      </div>  -->
<!--      <div class="form-group">  -->
<!--        <label for="password">密码:</label>  -->
<!--        <input type="password" id="password" v-model="loginForm.password" required style="margin-top: 2px;">  -->
<!--      </div>  -->
<!--      <button type="submit">登录</button>  -->
<!--    </form>  -->
<!--  </div>  -->
<!-- </div> -->
<!--  -->
<!--</template>  -->
<!--  -->
<!--<script setup>  -->
<!--import { ref } from 'vue';  -->
<!--import { useRouter } from 'vue-router';  -->
<!--  -->
<!--// 响应式数据：登录表单  -->
<!--const loginForm = ref({  -->
<!--  username: '',  -->
<!--  password: ''  -->
<!--});  -->
<!--  -->
<!--// 使用 vue-router 的 useRouter 钩子  -->
<!--const router = useRouter();  -->
<!--  -->
<!--// 处理登录的函数  -->
<!--const handleLogin = () => {  -->
<!--  console.log('尝试登录', loginForm.value);  -->
<!--  // 这里通常会有登录验证逻辑  -->
<!--  // 假设验证通过，直接跳转  -->
<!--  router.push('/manage1'); // 默认登录后跳转  -->
<!--};  -->
<!--</script>  -->

<template>
  <div class="background-image">
    <div class="login-container">
      <h2>登录</h2>
      <form @submit.prevent="handleLogin" style="margin-top: 20px;">
        <div class="form-group">
          <label for="username">账号:</label>
          <input type="text" id="username" v-model="loginForm.username" required style="margin-top: 2px;">
        </div>
        <div class="form-group">
          <label for="password">密码:</label>
          <input type="password" id="password" v-model="loginForm.password" required style="margin-top: 2px;">
        </div>
        <div v-if="errorMessage" style="color: red; margin-bottom: 10px;">
          {{ errorMessage }}
        </div>
        <button type="submit" :disabled="loading">
          {{ loading ? '登录中...' : '登录' }}
        </button>
      </form>
    </div>
  </div>
</template>

<script setup>
import {ref} from 'vue';
import {useRouter} from 'vue-router';
import request from '@/utils/request';

// 响应式数据：登录表单
const loginForm = ref({
  username: '',
  password: ''
});

const errorMessage = ref('');
const loading = ref(false);

// 使用 vue-router 的 useRouter 钩子
const router = useRouter();

// 处理登录的函数
const handleLogin = async () => {
  errorMessage.value = '';
  loading.value = true;

  try {
    const response = await request.post('/user/login', loginForm.value);

    if (response.code === 200) {
      // 登录成功，跳转到主页
      await router.push('/TopPage');
    } else {
      // 登录失败，显示错误信息
      errorMessage.value = response.message;
    }
  } catch (error) {
    console.error('登录请求失败:', error);
    errorMessage.value = '登录请求失败，请稍后重试';
  } finally {
    loading.value = false;
  }
};
</script>


<style scoped>
.background-image {
  /* 设置背景图片 */
  background-image: url('../../public/background.jpg');
  /* 背景图片覆盖整个元素 */
  background-size: cover;
  /* 背景图片不重复 */
  background-repeat: no-repeat;
  /* 背景图片位置，这里设置为居中 */
  background-position: center;
  /* 设置容器的高度和宽度 */
  width: 100%;
  height: 100vh; /* 使用视窗高度，根据需要调整 */
  /* 其他样式 */
  position: relative; /* 根据需要，可能用于子元素定位 */
  overflow: hidden; /* 防止图片溢出 */
}

.login-container {
  position: absolute;
  right: 2.5%; /* 距离右侧20px */
  top: 50%; /* 垂直居中，通过transform调整 */
  transform: translateY(-50%);
  width: 27%; /* 登录框的宽度 */
  padding: 20px;
  background-color: #fff; /* 登录框的背景色，可选 */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 可选的阴影效果 */
  border-radius: 8px; /* 可选的圆角效果 */
}

.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>